// 自定义配色
import React, { useState } from 'react';
import InputColorPicker from '../InputColorPicker';
import FormItem from 'antd/lib/form/FormItem';
// import { filterObjectNullKeys } from 'src/libs/utils';

interface IProps {
	config: any;
	onValuesChange: ( chartType: string, key: string, values: Object, configType: string ) => void;
	form: any;
}

interface customColorType {
	item: string;
	color: string;
}

const BulletCustomColor = ( props: IProps ) => {
	let { config, form, onValuesChange } = props;
	const [ chartRangeColor, setChartRangeColor ] = useState( ( config.style && config.style.chartRangeColor ) || '#f0fbff' );
	const [ chartMeasureColor, setChartMeasureColor ] = useState( ( config.style && config.style.chartMeasureColor ) || '#1890ff' );
	const [ chartTargetColor, setChartTargetColor ] = useState( ( config.style && config.style.chartTargetColor ) || '#43a5ff' );
	// const [ chartCustomBlockColor, setChartCustomBlockColor ] = useState( ( config.style && config.style.customBlockColor ) || [] );

	// 区间背景颜色
	const handleRangeColorChange = ( color ) => {
		setChartRangeColor( color );
		form.setFieldsValue( { chartRangeColor: color } );
		onValuesChange( config.type, config.key, { chartRangeColor: color }, 'style' );
	};

	// 实际值颜色
	const handleMeasureColorChange = ( color ) => {
		setChartMeasureColor( color );
		form.setFieldsValue( { chartMeasureColor: color } );
		onValuesChange( config.type, config.key, { chartMeasureColor: color }, 'style' );
	};

	// 目标值颜色
	const handleTargetColorChange = ( color ) => {
		setChartTargetColor( color );
		form.setFieldsValue( { chartTargetColor: color } );
		onValuesChange( config.type, config.key, { chartTargetColor: color }, 'style' );
	};

	// 数据颜色
	/* const handleDataColorChange = ( itemName, color ) => {
		let array = Array.from( chartCustomBlockColor );
		const index = array.findIndex( ( v: customColorType ) => v.item === itemName );
		array.splice( index, 1, { item: itemName, color: color } );

		setChartCustomBlockColor( array );
		form.setFieldsValue( { customBlockColor: array } );
		onValuesChange( config.type, config.key, { customBlockColor: array }, 'style' );
	}; */

	return (
		<div>
			<FormItem label="线颜色" name="chartTargetColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={ chartTargetColor }
					change={ ( color ) => handleTargetColorChange( color ) }
				></InputColorPicker>
			</FormItem>
      
			<FormItem label="数据颜色" name="chartMeasureColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={ chartMeasureColor }
					change={ ( color ) => handleMeasureColorChange( color ) }
				></InputColorPicker>
			</FormItem>

			<FormItem label="底色" name="chartRangeColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				<InputColorPicker
					color={ chartRangeColor }
					change={ ( color ) => handleRangeColorChange( color ) }
				></InputColorPicker>
			</FormItem>
			
			{/* <FormItem label="数据颜色" name="customBlockColor" labelAlign="left" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
				{
					chartCustomBlockColor.map( ( v, i ) => {
						console.log( v.color, chartCustomBlockColor );
						return (
							<div key={ i }>
								<span>{ v.item }</span>
								<InputColorPicker
									color={ v.color }
									change={ ( color ) => handleDataColorChange( v.item, color ) }
								></InputColorPicker>
							</div>
						);
					} )
				}
			</FormItem> */}
		</div>
	);
};

export default React.memo( BulletCustomColor );
